<template>
    <div>
        <Row type="flex" justify="space-between" align="middle">
            <Col span="6" class="title">栏目信息</Col>
            <Col span="18">
                <Col span="15" class="title" style="line-height: 33px;">“{{catItem && catItem.name}}”文章列表</Col>
                <Col span="9" :style="{textAlign: 'right'}">
                    <Button icon="md-add" @click="addArt" :disabled="btnDisabled">添加文章</Button>
                </Col>
            </Col>
       </Row>
       <div class="table-box" style="right: 75%;border: 1px solid #dcdee2;padding: 10px;">
            <Tree :data="treeData" @on-select-change="onSelectChange"></Tree>
       </div>
       <div class="table-box" style="left: 26%">
           <Table width="100%" :height="height" border :columns="columns" :data="data" :loading="loading"></Table>
           <Page :total="pageTotal" :current="pageCurrent" :page-size="pageSize"
           :page-size-opts="pageSizeOpts" show-sizer class="page" show-total @on-change="changePage" @on-page-size-change="pageSizeChang" />
       </div>
    </div>
</template>
<script>
    export default {
        data () {
            var height = this.$util.getClientHeight()-64-51-30-58-15-47;
            var that = this;

            return {
                loading: true,
                btnDisabled: true,
                height: height,
                modelIdObj: {},
                fieldList: null,
                pageCurrent: 1,
                pageSize: 15,
                pageSizeOpts: [15, 25, 35],
                pageTotal: 0,
                catItem: null,
                treeData: [],
                treeObj: null,
                columns: [
                    {
                        title: 'ID',
                        key: 'id',
                        width: 70
                    },
                    {
                        title: '标题',
                        key: 'title',
                        width: 150
                    },
                    {
                        title: '创建者',
                        key: 'createName',
                        width: 120
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        width: 170
                    },
                    {
                        title: '是否推荐',
                        key: 'recommend',
                        width: 100,
                        render: (h, params) => {
                            var recommend = params.row.recommend;
                            return h('span', recommend?'是':'否');
                        }
                    },
                    {
                        title: '属于栏目',
                        key: 'catName',
                        width: 200
                    },
                    {
                        title: '图片',
                        key: 'pic',
                        width: 100,
                        render: (h, params) => {
                            var src = params.row.pic;
                            var img = [
                                h('img', {
                                    attrs: {
                                        src: src
                                    },
                                    style: {
                                        width: '80px',
                                        height: '50px',
                                    }
                                }, '')];
                            return img;
                        }
                    },

                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        render: (h, params) => {
                            var flag = params.row.flag ? 0 : 1;
                            var buttonAction = [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: ()=>{
                                                that.editArt(params);
                                            }
                                        }
                                    }, '编辑'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: ()=>{
                                                that.delArt(params.row);
                                            }
                                        }
                                    }, '删除')
                                ];

                            return h('div', buttonAction);
                        }
                    }
                ],
                data: []
            }
        },
        created: function () {
            // 获取栏目信息
            this.getCatList();
        },
        methods: {
            // 获取栏目所有信息列表
            getCatList(){
                var that = this;
                that.$util.ajax({
                    that: that,
                    url: '/category/catlist/',
                    success: function(data){
                        that.treeObj = that.menuToObj(data.data);

                        data.data.forEach(function(item, index){
                            var title = null;
                            if(data.data[index].type === 1 ){
                                title = data.data[index]['name'] + '（单页栏目）';
                            } else {
                                title = data.data[index]['name'];
                            }

                            data.data[index]['title'] = title;
                        });



                        that.treeData = that.$util.arrToTree(data.data, {id:'id', parentId: 'parentId'});
                        that.catItem = that.treeData[0];
                        that.loading = false;

                        // 获取文章列表信息
                        that.getArtList();
                        // 获取字段列表信息
                        that.getFieldList();
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    }
                })
            },
            // 获取文章列表信息
            getArtList(){
                var that = this;
                var pageSize = that.pageSize;
                var pageCurrent = that.pageCurrent;
                var catItem = that.catItem;

                that.$util.ajax({
                    that: that,
                    url: '/article/artlist/',
                    data: {
                        catId: catItem.id,
                        pageSize: pageSize,
                        pageCurrent: pageCurrent
                    },
                    success: function(data){
                        that.data = data.data.data;
                        that.pageTotal = data.data.total;
                        that.loading = false;
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    }
                })
            },
            // 添加文章
            addArt(){
                var catItem = this.catItem;
                if(!catItem){
                    this.$Message.info('选择栏目后才能添加文章')
                } else if(catItem.children && catItem.children.length !== 0){
                    this.$Message.info('含有子栏目不能添加文章')
                } else if(catItem.type === 1){
                    this.$Message.info('单页栏目不能添加文章')
                } else {
                    var catItem = this.catItem;
                    var fieldList = this.fieldList;
                    this.$router.push({
                                    path: '/admin/addArt',
                                    query: {
                                        catId: catItem.id,
                                        fieldList: JSON.stringify(fieldList)
                                    }
                                });
                }
            },
            // 编辑文章
            editArt(params){
                var fieldList = this.fieldList;
                this.$router.push({
                                    path: '/admin/editArt',
                                    query: {
                                        'article': JSON.stringify(params.row),
                                        'fieldList': JSON.stringify(fieldList)
                                    }
                                });
            },
            // 删除角色组
            delArt(params){
                var that = this;
                that.$loading.show('更新中');
                that.$util.ajax({
                    that: that,
                    url: '/article/del/',
                    data: {
                        id: params.id,
                        catId: that.catItem.id
                    },
                    success: function(data){
                        that.$Message.info('删除成功！');
                        that.getArtList();
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function(){
                        that.$loading.hide();
                    }
                })
            },
            // 处理
            menuToObj(data){
                var menuObj = {};
                var len = data.length;

                for(var i=0; i<len; i++){
                    var menuItem = data[i];
                    menuObj[menuItem.id] = data[i];
                }
                return menuObj;
            },
            // 分页页码点击事件
            changePage (param){
                this.pageCurrent = param;
                this.getArtList();
            },
            // 每页显示条数选择事件
            pageSizeChang(param){
                this.pageSize = param;
                this.getArtList();
            },
            // 点击左侧栏目节点
            onSelectChange(param){
                if(param.length === 0){
                    return;
                }

                this.catItem = param[0];
                // 获取文章列表信息
                this.getArtList();
                // 获取字段列表信息
                this.getFieldList();
            },
            // 获取模型列表
            getFieldList(){
                var that = this;
                var modelId = that.catItem && that.catItem.modelId;
                var modelIdObj = that.modelIdObj;

                if(!modelIdObj[modelId]){
                    that.$loading.show('获取中');
                    that.$util.ajax({
                        that: that,
                        url: '/field/fieldlist/',
                        data: {
                            modelId: modelId
                        },
                        success: function(data){
                            that.fieldList = data.data;
                            that.modelIdObj[modelId] = data.data;
                        },
                        fail: function(msg){
                            that.$Message.info(msg);
                        },
                        complete: function(){
                            that.$loading.hide();
                            that.btnDisabled = false;
                        }
                    })
                } else{
                    that.fieldList = modelIdObj[modelId];
                    that.btnDisabled = false;
                }
            }
        }
    }
</script>
<style scoped>

</style>